<template>
	<view>
		<scroll-view class="order-scroll" scroll-y @scrolltolower="rollingLoading">
			<view class="order-items" @click="goDetail(item)" v-for="item,idx in orderList" :key="idx">
				<view class="head">
					<view class="title" v-if="item.sourceOfflineBusinessType==2">
						<view class="bus-name" v-if="item.remark.name">{{item.remark.name}}</view>
						<view class="bus-name" v-else>{{item.businessName}}-{{item.itemList[0].category.title}}</view>
						<view class="city">{{item.remark.modeType}}</view>
					</view>
					<view class="title" v-else>
						<span class="number">{{item.showId}}</span>
						<span v-if="item.remark.number">桌号{{item.remark.number}}</span>
					</view>
					<view class="state">
						{{item.state==1?'已完成':item.state==3||item.state==6?'进行中':'已退款'}}
					</view>
				</view>

				<view class="center-msg" v-if="item.state!=3&&item.state!=6">
					<view v-if="item.state==5">
						<span v-if="item.refundCause">由于{{item.refundCause}},</span>订单金额将原路退回至您的支付账号中！
					</view>
					<view class="code-img" v-else-if="item.goodsNumber||item.goodsNumberImage.length">
						<view class="top-code">
							<view>
								取餐码：{{item.goodsNumber?item.goodsNumber:""}}
							</view>
							<view class="right" v-if="item.goodsNumberImage" @click.stop="showHideImg(item,idx)">
								二维码<uni-icons :type="item.show?'top':'bottom'" size="16" color="#266fe2"></uni-icons>
							</view>
						</view>

						<view v-if="item.show">
							<image class="img" v-for="(pic,index) in item.goodsNumberImage" :key="index"
								@click.stop="viewPic(picServiceUrl+pic)" :src="picServiceUrl+pic" mode="widthFix">
							</image>
						</view>
					</view>
					<view v-else>
						订单已完成
					</view>
				</view>

				<view class="center-msg" v-else>
					<view v-if="item.businessId==1||item.businessId==2">
						预计72小时内到账，请注意查收
					</view>
					<view v-else>
						正在加速为您处理订单...
					</view>
				</view>



				<view v-for="good,idkey in item.itemList" :key="idkey">
					<view class="row goods">
						<view>{{good.goodsName}}</view>
						<view>￥{{good.originalPrice/100}}</view>
					</view>
					<view class="row shuxing">
						<view>{{good.specificationName}}</view>
						<view style="color: #36b172;">X{{good.nums}}</view>
					</view>
				</view>
				<view class="row count">
					<view><span v-if="item.itemList">共{{item.itemList.length}}种</span></view>
					<view>合计￥{{item.originalPrice/100}}</view>
				</view>
				<view class="row price-df" v-if="item.discountPrice">
					（含再花卡代付￥{{item.discountPrice/100}})
				</view>
				<view class="other">下单时间：{{item.createTimeString_date}}</view>

				<view class="other-order">订单编号：{{item.orderNumber}}<text class="link"
						@click.stop="copyInfo(item.orderNumber)">复制</text></view>
			</view>
			<view class="f-no-more" v-if="!noMore">
				没有更多了~
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				orderList: [],
				thePage: 1,
				state: 4,
				noMore: true,
				picServiceUrl: app.globalData.picServiceUrl,
			}
		},
		onShow() {
			this.getOrderList();
		},
		methods: {
			copyInfo(info) {
				uni.setClipboardData({
					data: info + '',
					success(res) {
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
			viewPic(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			goDetail(item) {
				uni.navigateTo({
					url: "./detail/detail?id=" + item.id
				})
			},
			rollingLoading() {
				if (this.noMore) {
					this.setData({
						thePage: this.thePage + 1
					});
					this.getOrderList();
				}
			},
			handleChange(type) {
				this.thePage = 1;
				this.orderList = [];
				this.state = type;
				this.noMore = true;
				this.getOrderList();
			},
			showHideImg(item, index) {
				item.show = !item.show;
				this.orderList.splice(index, 1, item);
			},
			getOrderList() {
				uni.request({
					url: app.globalData.serviceUrl +
						'/UserMiniProgramController/getUserOfflineBusinessOrderList',
					method: 'POST',
					data: {
						key: uni.getStorageSync('userKey'),
						// offline_business_ids: 1,
						state: '0,1,3,4,5,6,7,8',
						//-1全部(默认) 0取消 1完成 2待支付 3待客服处理 4客服处理中 5处理失败 6待商家接单 7商家已接单 8商家取消接单 支持逗号分隔多个状态
						page: this.thePage
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.state == 1) {
							let info = res.data.data;
							for (let i in info) {
								try {
									info[i].remark = JSON.parse(info[i].remark);
								} catch (err) {
									info[i].remark = info[i].remark
								}
								if (info[i].goodsNumberImage) {
									let arr = info[i].goodsNumberImage.split(",");
									info[i].goodsNumberImage = arr;
								}

								info[i].showId = "00" + info[i].id;
								let len = info[i].showId.length;
								info[i].showId = info[i].showId.substring(len - 4, len)
								// console.log(info[i].remark)
								// name: this.info.name,
								// city: this.info.city,
								// phone: this.phone,
								// modeType: this.modeType == 0 ? "店内就餐" : "打包带走",
								// number: this.info.number,
								// userNumer: this.userNumer,
								// cityInfo: this.cityInfo[0],
							}
							if (this.thePage == 1) {
								this.orderList = info
							} else {
								this.orderList = this.orderList.concat(info)
							}
							if (info.length == 0) {
								this.noMore = false;
							}
						}

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-bg {
		height: 100vh;
		background: rgba(242, 243, 248, 1);
	}

	.order-scroll {
		height: 100vh;
		box-sizing: border-box;
		background: rgba(242, 243, 248, 1);
	}

	.order-items {
		margin: 10px;
		padding: 15px;
		background-color: #fff;
		box-shadow: 0px 3px 5px 0px rgba(207, 207, 207, 0.39);
		border-radius: 5px;

		.head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #f6f6f6;
			border-radius: 5px;

			.title {
				padding: 10px;
				font-size: 20px;

				.number {
					font-size: 42px;
					margin-right: 10px;
				}

				.city {
					font-size: 18px;
				}

				.bus-name {
					font-size: 18px;
				}
			}

			.state {
				line-height: 75px;
				width: 75px;
				border-left: 1px solid #e2e2e2;
				text-align: center;
				// color: #266fe2;
			}
		}

		.center-msg {
			background: #f1fcf6;
			color: #36b172;
			padding: 15px;
			margin: 20px 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.link {
				text-decoration: underline;
				color: #266fe2;
			}

			.code-img {
				width: 100%;

				.top-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;

					.right {
						font-size: 16px;
						color: #266fe2;
					}
				}

				.img {
					margin-top: 20px;
					width: 100%;
					background: #EEE;
				}
			}
		}


		.row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 5px 0;
		}

		.count {
			margin-top: 20px;
		}

		.price-df {
			font-size: 14px;
			padding-bottom: 20px;
			border-bottom: 1px solid #e3e3e3;
			justify-content: flex-end;
		}

		.shuxing {
			color: #666;
		}

		.other {
			font-size: 14px;
			color: #666;
		}

		.other-order {
			font-size: 14px;
			color: #666;
			margin-top: 10px;

			.link {
				margin-left: 15px;
				text-decoration: underline;
				color: #266fe2;
			}
		}
	}
</style>
